<template>
    <div class="page">
        <ul>
            <li @click="prevClick">上一页</li>
            <li :class="[i==currentPage?'active':'']" v-for="i in totalPage" :key="i" @click="pageChange(i)">{{i}}</li>
            <li @click="nextClick">下一页</li>
        </ul>
    </div>
</template>
<script>
export default {
    props:['totalPage','currentPage'],
    methods:{
        pageChange(i){
           this.$emit('currPageC',i)
        },
        prevClick(){
            let i
           i= this.currentPage <=1 ? 1:this.currentPage-1
            this.$emit('currPageC',i)
        },
        nextClick(){
              let i
           i= this.currentPage >=this.totalPage ? this.totalPage:this.currentPage+1
            this.$emit('currPageC',i)
        }
    }
}
</script>
<style>
 .page ul li{
     float: left;
     list-style: none;
     padding: 4px 8px;
     border: 1px solid #aaa;
     background: lightblue
 }
 .page ul li:hover{
      background:blue;
      color: #fff;
 }
 .page ul{
     float: right;
     height: 30px;
     margin-top: 20px;
 }
  .page ul li.active{
     background: blue;
 }

</style>


